<template>
        <div v-if="goodsChannel" class="bottom-btn-box">
            <div class="rbox">
                <em><b>{{amount1.toFixed(2)}}</b>(${{amount2.toFixed(2)}})</em>
                <a><pay-button :couponId="couponId" :type="type">{{btn2}}</pay-button></a>
            </div>
        </div>
        <div class="bottom-btn-box" v-else>
         <div class="rbox" v-if="showExTime">
             <template v-if="isUser">
                  <em><b>{{amount1.toFixed(2)}}</b>(${{amount2.toFixed(2)}})</em>
                  <a><pay-button :couponId="couponId" :type="type">{{btn1}}</pay-button></a>
             </template>
             <template v-else>
                   <em><b>{{amount1.toFixed(2)}}</b>(${{amount2.toFixed(2)}})</em>
                <div class="btn-notext">{{btn1}}</div>
             </template>
           
        </div>
        <div class="bottom-btn-box norbox" v-else>
            <div class="text">{{text14}}:{{detail.exchangeAllowDate}}</div>
            <div class="btn">{{btn1}}</div>
        </div>  
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import payButton from './payButton.vue';
import moment from 'moment'
import { useI18n } from 'vue-i18n'

export default {
    components:{
       payButton
    },
    props:{
        type:Number,
        amount1:{
            type:Number,
            default:0
        },
        amount2:{
            type:Number,
            default:0
        },
         couponId:{
            type:String,
            default:null
        }
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            detail:computed(()=>store.state.shop.detail),
            orderInfo:computed(()=>store.state.shop.orderInfo),
            goodsChannel:computed(()=>{
                if(store.state.shop.detail.goodsChannel==1){
                    return true
                }else{
                    return false
                }
            }),
             showExTime:computed(()=>{
                if(store.state.shop.detail.exchangeAllowDate){
                    let date = new Date()
                    let time1=  date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()
                    if(moment(time1).diff(moment(store.state.shop.detail.exchangeAllowDate),'YYYY-MM-DD') >= 0 ){
                          return true
                    }else{
                        return false
                    }
                }else{
                    return false
                }
            }),
            isUser:computed(()=>{
                if(store.state.shop.detail.bornNftUserAddress!=null){
                    return store.state.base.userInfo.walletAddress.toLowerCase() == store.state.shop.detail.bornNftUserAddress.toLowerCase()
                }else{
                    return false
                }
            }),
            btn1:t('goods.btn1'),
            btn2:t('goods.btn2'),
            text14:t('goods.text14'),
        })

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .bottom-btn-box{
        height: 80px;
        .rbox{
            float:right;
            display: flex;
            height: 100%;
            width: 700px;
            background: url(/images/self/self3.png) left top no-repeat;
            background-size: 100% 100%;
            em{
                flex: 1;
                text-align: left;
                line-height: 80px;
                padding: 0 0 0 70px;
                font-size: 30px;
                font-style: normal;
                font-family: Inter-Medium, Inter;
                font-weight: 500;
                b{
                    font-weight: 500;
                    color: #9BE7F4;
                }
            }
            a{
                display: block;
                width: 300px;
                font-size: 30px;
                line-height: 80px;
                font-style: normal;
                font-family: Inter-Medium, Inter;
                font-weight: 500;
                text-align: center;
            }
             .btn-notext{
                height:90px;
                text-align: center;
                font-size:28px;
                line-height:90px;
                width:200px;
                color: #999;
                border-radius:10px;
                padding-right:70px;
            }
        }
        .norbox{
            display: flex;
            justify-content:flex-end;
            width:100%;
            padding-right:40px;
            padding-bottom:4px;
            padding-top:10px;
            .text{
                font-size:28px;
                padding-right:20px;
                line-height:60px;
            }
            .btn{
                height:60px;
                text-align: center;
                font-size:28px;
                line-height:60px;
                width:200px;
                color: #999;
                border-radius:10px;
            }
        }
    }
    
</style>